<template>
	<view class="forgot-container">
		<!-- 增强版背景装饰 -->
		<view class="background-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
			<view class="decoration-circle circle-4"></view>
			<view class="floating-particle particle-1"></view>
			<view class="floating-particle particle-2"></view>
			<view class="floating-particle particle-3"></view>
		</view>

		<view class="forgot-card">
			<!-- 头部区域 -->
			<view class="forgot-header">
				<view class="header-icon">
					<text class="icon">🔐</text>
					<view class="icon-glow"></view>
				</view>
				<text class="title">忘记密码</text>
				<text class="subtitle">通过手机号找回密码</text>
			</view>

			<!-- 表单区域 -->
			<view class="forgot-form">
				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">👤</view>
						<view class="input-container">
							<input class="input" v-model="form.user_name" placeholder="请输入用户名"
								placeholder-class="placeholder" @focus="onInputFocus('username')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'username' }"></view>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">📱</view>
						<view class="input-container">
							<input class="input" v-model="form.user_phone" placeholder="请输入手机号"
								placeholder-class="placeholder" type="number" maxlength="11"
								@focus="onInputFocus('phone')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'phone' }"></view>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">🔑</view>
						<view class="input-container">
							<input class="input" v-model="form.new_password" password placeholder="请输入新密码"
								placeholder-class="placeholder" @confirm="handleResetPassword"
								@focus="onInputFocus('password')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'password' }"></view>
						<text class="tip">密码至少6位</text>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">✅</view>
						<view class="input-container">
							<input class="input" v-model="form.confirm_password" password placeholder="请再次输入新密码"
								placeholder-class="placeholder" @confirm="handleResetPassword"
								@focus="onInputFocus('confirm')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'confirm' }"></view>
					</view>
				</view>

				<!-- 重置按钮 -->
				<button class="reset-btn" :loading="loading" @click="handleResetPassword" :disabled="!canReset">
					<text class="btn-text">{{ loading ? '重置中...' : '重置密码' }}</text>
					<view class="btn-glow"></view>
					<view class="btn-wave" v-if="!loading"></view>
				</button>

				<!-- 登录链接 -->
				<view class="login-link">
					<text class="link-text">想起密码？</text>
					<view class="link-container" @click="navigateToLogin">
						<text class="link">立即登录</text>
						<view class="link-underline"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="wave wave-1"></view>
			<view class="wave wave-2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				activeInput: '',
				form: {
					user_name: '',
					user_phone: '',
					new_password: '',
					confirm_password: ''
				}
			}
		},
		computed: {
			canReset() {
				return this.form.user_name.trim() &&
					this.form.user_phone.trim() &&
					this.form.new_password.trim() &&
					this.form.confirm_password.trim() &&
					!this.loading
			}
		},
		methods: {
			onInputFocus(field) {
				this.activeInput = field;
			},

			onInputBlur() {
				this.activeInput = '';
			},

			validateForm() {
				if (!this.form.user_name.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}

				if (!this.form.user_phone.trim()) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}

				if (!/^1[3-9]\d{9}$/.test(this.form.user_phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return false
				}

				if (!this.form.new_password.trim()) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return false
				}

				if (this.form.new_password.length < 6) {
					uni.showToast({
						title: '密码至少6位',
						icon: 'none'
					})
					return false
				}

				if (this.form.new_password !== this.form.confirm_password) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return false
				}

				return true
			},

			async handleResetPassword() {
				if (!this.validateForm()) {
					return
				}

				this.loading = true
				try {
					const resetData = {
						user_name: this.form.user_name,
						user_phone: this.form.user_phone,
						new_password: this.form.new_password
					}

					// 使用统一的 Promise 包装方式
					const [error, response] = await new Promise((resolve) => {
						uni.request({
							url: 'http://localhost:8000/api/v1/users/forgot-password',
							method: 'POST',
							data: resetData,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => resolve([null, res]),
							fail: (err) => resolve([err, null])
						})
					})

					console.log('重置密码响应:', {
						error,
						response
					})

					if (error) {
						console.error('重置密码请求失败:', error)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
						return
					}

					// 现在 response 一定存在
					if (response.statusCode === 200) {
						uni.showToast({
							title: '密码重置成功',
							icon: 'success'
						})

						// 延迟跳转回登录页面
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						const errorMsg = response.data?.detail || `重置密码失败: ${response.statusCode}`
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 4000
						})
					}
				} catch (error) {
					console.error('重置密码错误:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			navigateToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style scoped>
	.forgot-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #6A0DAD 0%, #8A2BE2 30%, #9370DB 70%, #DA70D6 100%);
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	/* 增强版背景装饰 */
	.background-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float 15s infinite ease-in-out;
	}

	.circle-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -100rpx;
		animation-delay: 0s;
	}

	.circle-2 {
		width: 200rpx;
		height: 200rpx;
		bottom: 20%;
		right: -50rpx;
		animation-delay: 5s;
	}

	.circle-3 {
		width: 150rpx;
		height: 150rpx;
		top: 50%;
		left: 80%;
		animation-delay: 10s;
	}

	.circle-4 {
		width: 180rpx;
		height: 180rpx;
		top: 70%;
		left: 10%;
		animation-delay: 3s;
	}

	.floating-particle {
		position: absolute;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		animation: float-particle 8s infinite ease-in-out;
	}

	.particle-1 {
		width: 20rpx;
		height: 20rpx;
		top: 30%;
		left: 20%;
		animation-delay: 0s;
	}

	.particle-2 {
		width: 15rpx;
		height: 15rpx;
		top: 60%;
		left: 70%;
		animation-delay: 2s;
	}

	.particle-3 {
		width: 25rpx;
		height: 25rpx;
		top: 80%;
		left: 30%;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg) scale(1);
		}

		33% {
			transform: translateY(-30rpx) rotate(120deg) scale(1.1);
		}

		66% {
			transform: translateY(20rpx) rotate(240deg) scale(0.9);
		}
	}

	@keyframes float-particle {

		0%,
		100% {
			transform: translateY(0) translateX(0);
			opacity: 0.5;
		}

		50% {
			transform: translateY(-40rpx) translateX(20rpx);
			opacity: 1;
		}
	}

	.forgot-card {
		width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 32rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 25rpx 60rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 2;
	}

	.forgot-header {
		text-align: center;
		margin-bottom: 70rpx;
	}

	.header-icon {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto 35rpx;
	}

	.icon {
		font-size: 50rpx;
		position: relative;
		z-index: 2;
		display: block;
		text-align: center;
		line-height: 100rpx;
	}

	.icon-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 140rpx;
		height: 140rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		border-radius: 50%;
		opacity: 0.3;
		filter: blur(20rpx);
		animation: glow-pulse 2s ease-in-out infinite;
	}

	@keyframes glow-pulse {

		0%,
		100% {
			opacity: 0.2;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}

	.title {
		display: block;
		font-size: 52rpx;
		font-weight: 700;
		color: #1e293b;
		margin-bottom: 20rpx;
		background: linear-gradient(135deg, #1e293b, #8A2BE2);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.subtitle {
		font-size: 28rpx;
		color: #64748b;
		letter-spacing: 1rpx;
		font-weight: 500;
	}

	.forgot-form {
		display: flex;
		flex-direction: column;
	}

	.form-row {
		margin-bottom: 45rpx;
	}

	.input-wrapper {
		position: relative;
	}

	.input-icon {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		z-index: 2;
		color: #8A2BE2;
	}

	.input-container {
		position: relative;
	}

	.input {
		height: 90rpx;
		border: 2rpx solid #e2e8f0;
		border-radius: 20rpx;
		padding: 0 80rpx 0 80rpx;
		font-size: 30rpx;
		background: rgba(248, 250, 252, 0.8);
		width: 100%;
		box-sizing: border-box;
		transition: all 0.4s ease;
		color: #1e293b;
		font-weight: 500;
	}

	.input:focus {
		border-color: #8A2BE2;
		background: #fff;
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		transform: translateY(-2rpx);
	}

	.input-line {
		position: absolute;
		bottom: 0;
		left: 80rpx;
		right: 0;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		transform: scaleX(0);
		transition: transform 0.4s ease;
		border-radius: 3rpx;
	}

	.input-line.active {
		transform: scaleX(1);
	}

	.placeholder {
		color: #94a3b8;
		font-size: 30rpx;
		font-weight: 400;
	}

	.tip {
		display: block;
		font-size: 24rpx;
		color: #8A2BE2;
		margin-top: 12rpx;
		font-weight: 500;
		padding-left: 80rpx;
	}

	/* 重置按钮 */
	.reset-btn {
		height: 100rpx;
		background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
		margin-top: 30rpx;
		width: 100%;
		transition: all 0.4s ease;
		box-shadow: 0 12rpx 30rpx rgba(138, 43, 226, 0.4);
		position: relative;
		overflow: hidden;
	}

	.btn-text {
		position: relative;
		z-index: 2;
	}

	.btn-glow {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #9370DB 0%, #8A2BE2 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.btn-wave {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		animation: wave 1.5s ease-out infinite;
	}

	@keyframes wave {
		0% {
			width: 0;
			height: 0;
			opacity: 1;
		}

		100% {
			width: 300rpx;
			height: 300rpx;
			opacity: 0;
		}
	}

	.reset-btn:active {
		transform: translateY(3rpx);
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
	}

	.reset-btn:active .btn-glow {
		opacity: 1;
	}

	.reset-btn[disabled] {
		background: #cbd5e1;
		box-shadow: 0 4rpx 15rpx rgba(203, 213, 225, 0.4);
		transform: none;
	}

	.reset-btn[loading] {
		opacity: 0.9;
	}

	/* 登录链接 */
	.login-link {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 45rpx;
		font-size: 28rpx;
		color: #64748b;
		gap: 16rpx;
	}

	.link-text {
		font-weight: 500;
	}

	.link-container {
		position: relative;
		display: inline-block;
	}

	.link {
		color: #8A2BE2;
		font-weight: 700;
		position: relative;
		z-index: 1;
	}

	.link-underline {
		position: absolute;
		bottom: -4rpx;
		left: 0;
		width: 100%;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		border-radius: 2rpx;
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.link-container:active .link-underline {
		transform: scaleX(1);
	}

	.link-container:active .link {
		opacity: 0.8;
	}

	/* 底部装饰 */
	.bottom-decoration {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		z-index: 1;
	}

	.wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50% 50% 0 0;
		animation: wave-move 10s linear infinite;
	}

	.wave-1 {
		animation-delay: 0s;
		opacity: 0.6;
	}

	.wave-2 {
		animation-delay: -5s;
		opacity: 0.3;
	}

	@keyframes wave-move {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}
</style>